:root {
    font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;line-height: 1.5;font-weight: 400;
    color-scheme: light dark;color: rgba(255, 255, 255, 0.87);background-color: #242424;
    font-synthesis: none;text-rendering: optimizeLegibility;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;
}

a {font-weight: 500;color: #646cff;text-decoration: inherit;}
a:hover {color: #535bf2;}

body {margin: 0;display: flex;place-items: center;min-width: 320px;min-height: 100vh;}

h1 {font-size: 3.2em;line-height: 1.1;}

button {
    border-radius: 8px;border: 1px solid transparent;padding: 0.6em 1.2em;font-size: 1em;
    font-weight: 500;font-family: inherit;background-color: #1a1a1a;cursor: pointer;
    transition: border-color 0.25s;
}
button:hover {border-color: #646cff;}
button:focus, button:focus-visible {outline: 4px auto -webkit-focus-ring-color;}

.card {padding: 2em;}

#app {max-width: 1280px;margin: 0 auto;padding: 2rem;text-align: center;}

@media (prefers-color-scheme: light) {
    :root {color: #213547;background-color: #ffffff;}
    a:hover {color: #747bff;}
    button {background-color: #f9f9f9;}
}